import {
  ModalForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Button, Form, message, Upload, } from 'antd';
import { getToken } from '../../utils/const.ts';
import { UploadOutlined } from '@ant-design/icons';
import { useEffect } from 'react';
import { request } from '../../utils/request.ts';
import RemoteSelect from '../../components/RemoteSelect/index.jsx';
const Edit = ({ open, setOpen, actionRef, record, }) => {
  const [form] = Form.useForm();
  const uploadProps = {
    headers: {
      token: getToken(),
    },
    maxCount: 1,
  }
  useEffect(() => {
    if (open) {
      const initial = {
        ...record,
        pic: record?.pic
          ? [{
            uid: '-1',
            name: '头像.png',
            status: 'done',
            url: record.pic,
          }]
          : [],
      };
      form.setFieldsValue(initial);
    }
  }, [open, record, form]);
  return (
    <>
      <ModalForm
        title={record?.id ? "学员编辑" : "新增学员"}
        form={form}
        autoFocusFirstInput
        open={open}
        width={500}
        layout="horizontal" // 关键点
        labelCol={{ span: 6 }} // label 占 6/24
        wrapperCol={{ span: 18 }} // 输入框占 18/24
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setOpen(false),
        }}
        onFinish={async (values) => {
          const { pic, ...other } = values;
          console.log('pic===', pic);          
          try {
            const res = await request(record?.id ? '/api/user/studentUpdate' : '/api/studentRegister', {
              method: 'POST',
              data: {
                ...other,
                pic: pic && pic[0]?.response?.data ? pic[0].response.data : record?.pic,
                userId: record?.id,
              },
            });
            if (res.data) {
              message.success('提交成功');
              setOpen(false);
              actionRef.current?.reload();
            } else {
              message.error(res.msg);
            }
          } catch (error) {
            console.error('Failed to submit data:', error);
          }
          return true;
        }}
      >
        <ProFormText name="email" label="邮箱" rules={[{ required: true, }]} />
        <ProFormText name="mobilephone" label="手机号" rules={[{ required: true, }]} />
        <ProFormText name="idcard" label="身份证号码" rules={[{ required: true, }]} />
        <ProFormSelect
          options={[
            {
              value: '男',
              label: '男',
            },
            {
              value: '女',
              label: '女',
            },
          ]}
          name="sex"
          label="性别"
          rules={[{ required: true, message: '请选择性别' }]}
        />
        <ProFormText name="name" label="姓名" rules={[{ required: true, }]} />
        <ProFormText name="address" label="单位信息" rules={[{ required: true, }]} />
        <ProFormDatePicker name="birthday" label="生日" rules={[{ required: true, }]} />
        <RemoteSelect
          name="classId"
          label="班级"
          rules={[{ required: true, message: '请选择班级' }]}
          fetchUrl="/api/class/pageList"
          fetchMethod="POST"
          fetchParams={{ status: '-1' }}
          mapOption={item => ({ label: item.name, value: item.id })}
          fieldProps={{
            allowClear: true,
          }}
        />
        <Form.Item
          label="头像地址"
          name="pic"
          valuePropName="fileList"
          getValueFromEvent={e => Array.isArray(e) ? e : e && e.fileList}
          rules={[
            { required: true, message: '请上传头像' },
          ]}>
          <Upload name="file" action="/api/uploadFile" {...uploadProps} listType="picture">
            <Button icon={<UploadOutlined />}>上传头像</Button>
          </Upload>
        </Form.Item>
      </ModalForm >
    </>
  );
};
export default Edit;